<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }

  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/

</style>
<template>
  <div class="sendcar">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      运费确认
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form method="post" id="formid">
        <input name="guid" id="guid" type="hidden" :value="guid" />
        <div class="cellgroup">
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">订单编号</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly id="sellcode" :value="sellform.sellcode" name="">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">发货重量</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input inlinput1" id="applyname" readonly  type="text"  name="" :value="loadWeightL.weight">
              <input class="weui-input inlinput2" type="text" readonly value="kg">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">货运时长</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="sellform.calloadtime">
            </div>
          </div>
          <div class="weui-cell" v-if="JSON.stringify(loadWeightL) != '{}' && loadWeightL.imgs.length > 0">
            <div class="weui-cell__hd"><label class="weui-label">发货过磅单</label></div>
            <div class="weui-cell__bd">
              <div class="weui-media-box weui-media-box_text uploaderFiles">
                <div class="exp uploaderFiles" style="display: inline-block;">
                  <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in loadWeightL.imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
                </div>
              </div>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">结算重量</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input inlinput1" id="fareweight" v-model="fareweight" type="number"  name="fareweight">
              <input class="weui-input inlinput2" type="text" readonly value="kg">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">运输损耗(kg)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly  name="" :value="sellform.shWeight">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">运价({{sellform.farepricetypename}})</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" readonly  type="text"  name="" :value="sellform.fareprice">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">运费(元)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" id="logfinalprice"  style="color: red" name="logfinprice" :value="sellform.logfinalprice">
            </div>
          </div>
        </div>

        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ConfirmFare',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        guid : "",
        nodeid: '',
        sellform: {},
        loadWeightL: {},
        unLoadWeightL: {},
        fareweight: '',
        status: ''
      }
    },
    created() {

    },
    mounted () {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })

      let that = this;
      that.guid = this.$route.query.guid;
      that.nodeid = this.$route.query.nodeid;

      if (this.$route.query.status) {
        this.status = this.$route.query.status;
      }

      //获取回显数据
      $.ajax({
        url: '/sales/Sellform!detail.action',
        data: {orderid:that.guid},
        type: "post",
        dataType: "json",
        success: function(res) {
          if (res.status == 'true') {
            that.sellform = res.result;
            let weightLst = that.sellform.weightlist;
            for (let i=0; i<weightLst.length; i++) {
              switch (weightLst[i].wtype) {
                case 1:
                  that.loadWeightL = weightLst[i];
                  break;
                case 2:
                  that.unLoadWeightL = weightLst[i];
                  break;
              }
            }

          } else if (res.status == 'false') {
            that.toastError(res.result);
          } else {
            that.toastError('系统异常');
          }
        },
        complete: function () {

        }
      });

      $('.weui-cells_form').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });
    },
    watch: {
      "fareweight": function (weight) {
        this.sellform.logfinalprice = (weight * this.sellform.fareprice).toFixed(1);
      }
    },
    methods: {
      send: function() {
        let that = this;

        if(!checkSubmit()){
          return;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        this.axios({
          method: 'post',
          responseType: 'json',
          headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
          url: '/sales/Sellform!putFinalPrice.action?nodeid=' + this.nodeid,
          params: this.serialize2Obj($("#formid").serializeArray())
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.status == "true") {
            this.toastSuccess('操作成功!');
            this.$router.push({name: 'Sellform', query:{stat: this.status}});
          }else if (response.data.status == "false") {
            this.toastText(response.data.result);
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
            this.toastError('系统错误!');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });

      },
      serialize2Obj: function (data) {
        var obj = {};
        $.each(data,function(i,v){
          obj[v.name] = v.value;
        })
        return obj;
      }
    }
  }

  /**
   * 提交之前的校验
   */
  function checkSubmit(){
    //物流公司
    if(isEmpty("fareweight")){
      $.alert("结算重量有误！");
      return false;
    } else if(isEmpty("logfinalprice")){
      $.alert("运费有误！");
      return false;
    }
    return true;
  }

  function isEmpty(domID){

    return $('#' + domID).val() == "" || $('#' + domID) == null;
  }


</script>
